<style lang="less">
  @import './login.less';
</style>

<template>
  <div class="login">
    <!--<div style="float: left;margin-left: 15%;margin-top: 10%">
     <img src="../../assets/images/kh2-bg.jpg" style="width: 200%"/>
    </div>-->
    <div class="login-con">
      <Card icon="log-in" title="欢迎登录" :bordered="false">
        <div class="form-con">
          <Form ref="user" :model="user" :rules="rules" @keydown.enter.native="handleSubmit">
            <FormItem prop="userName">
              <Input v-model="user.userName" placeholder="请输入用户名">
                <span slot="prepend">
                  <Icon :size="16" type="ios-person"></Icon>
                </span>
              </Input>
            </FormItem>
            <FormItem prop="password">
              <Input type="password" v-model="user.password" placeholder="请输入密码">
                <span slot="prepend">
                  <Icon :size="14" type="md-lock"></Icon>
                </span>
              </Input>
            </FormItem>
            <FormItem>
              <Button @click="handleSubmit" type="primary" long>保存注册</Button>
              <Button  :to="{ name: 'login', query: {  } }" type="success" long>跳到登录页面</Button>
            </FormItem>
          </Form>
         <!-- <p class="login-tip">输入任意用户名和密码即可</p>-->
        </div>
      </Card>
    </div>
  </div>
</template>

<script>
import user from '../../common/user'

export default {
  data () {
      return {
          user: {
              userName: '',
              password: ''
          },
          rules:{
              userName: [
                  { required: true, message: '请输入用户名', trigger: 'blur' }
              ],
              password: [
                  { required: true, message: '请输入密码', trigger: 'blur' },
                  { type: 'string', min: 6, message: '密码长度最少6位', trigger: 'blur' }
              ]
          }
      }
  },
  components: {

  },
  methods: {
      handleSubmit(){
          this.$refs['user'].validate((valid) => {
              if (valid) {
                 /* this.$Message.success("xxxxxxxxxxx");*/
                 // console.log( this.$qs.stringify(this.user))
                  this.$axios.post('/api/regist',this.$qs.stringify(this.user)).then(res=>{
                      let code = res.data.code;
                      let data = res.data.data;
                      if(code=='200'){
                          this.$Message.success('注册成功!');
                          this.$router.push({   path:'/login',   query:{  id:this.id ,}});
                      }else{
                          this.$Message.error(data);
                      }
                  }).catch((res)=>{
                      this.$Message.error(res);
                  });
              } else {
                  //this.$Message.error('请正确输入用户名和密码!');
              }
          })
      }
  },
  computed:{


  }
}
</script>

<style>

</style>
